<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 函数防抖,高频事件 N 秒内只执行一次,  在 N 秒内,如果再次触发,则会重新计时
        // 有可能出现 一直不执行?
        // function debounce(func, wait) {
        //     let timer;
        //     return function () {
        //         var contetx = this;
        //         var args = arguments;
        //         clearTimeout(timer);
        //         timer = setTimeout(() => {
        //             func.apply(context, args)
        //         }, wait)
        //     }
        // }

        // 升级版  立即执行 版
        function debounce(func, wait, immediate) {
            let timer;
            let result;

            let _ = function () {
                let context = this;
                let args = arguments;
                if (timer) {
                    clearTimeout(timer)
                }
                if (immediate) {
                    let flag = !timer;
                    timer = setTimeout(() => {
                        timer = null;
                    }, wait)
                    // timer 只要是 null 就说明时间间隔已过,可以执行了
                    if (flag) {
                        result = func.apply(context, args)
                    }
                } else {
                    timer = setTimeout(() => {
                        result = func.apply(context, args)
                        timer = null;
                    }, wait)
                }
                return result
            }
            _.cancel = function () {
                clearTimeout(timer)
                timer = null;
            }
            return _;
        }
    </script>
</body>

</html>